<script setup lang="ts">
import { ref } from "vue"
import Card from "../homeCard.vue"
import Table from './components/homeTable.vue'
import { GetOrderListApi, getUnauditedCount } from '@/api/Purchasing'
// 为审核采购单
const unPurchaseList = ref([])
const count = ref(0)
const getPurchasePageApi = async () => {
  let res = await GetOrderListApi({
    currentPage: 1,
    pageSize: 3,
    examineStatus: '1wait_examine'
  })
  if (res.code == 2000) {
    unPurchaseList.value = res.data.records
  }
}
const getUnauditedCountApi = async () => {
  let res = await getUnauditedCount()
  if (res.code == 2000) {
    count.value = res.data
  }
}
const colomns = [{
  key: 'index',
  name: '序号'
}, {
  key: 'deliveryDate',
  name: '日期',
  width: '75px'
}, {
  key: 'purchaseOrderNo',
  name: '编号',
  width: '135px'
},
{
  key: 'tenantName',
  name: '餐厅',
  width: '80px'
},
]
onMounted(() => {
  getPurchasePageApi()
  getUnauditedCountApi()
})
</script>

<template>
  <div class="purchaseReview">
    <Card title="采购单待审核" path="/purchaseorder">
      <template v-slot:icon>
        <div class="icon" v-if="count > 0">{{ count }}</div>
      </template>
      <div class="mt-3">
        <Table v-if="unPurchaseList.length > 0" :data="unPurchaseList" :colomns="colomns"></Table>
        <div class="noData" v-else>
          <img src="@/assets/images/noTasks.png" width="80px" height="80px" />
          <div class="font">暂无审核任务</div>
        </div>
      </div>

    </Card>
  </div>
</template>

<style lang="scss" scoped>
.icon {
  line-height: 14px;
  height: 16px;
  padding: 1px 6px;
  font-weight: 400;
  font-size: 10px;
  color: #FFFFFF;
  background: #F52F3E;
  border-radius: 31px;
  margin-left: 4px;
}

.noData {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}
</style>